<template>
  <div class="conterhome">
    <!-- 1.顶部导航栏 -->
    <van-nav-bar>
      <template #left>
        <div class="bgcImg"></div>
      </template>
      <template #right>
        <van-button icon="search" type="info" round @click="$router.push('/seach')"> 搜索 </van-button>
      </template>
    </van-nav-bar>
    <!-- 2.tab标签栏 -->
    <van-tabs v-model="active" @click="tabsClick">
      <van-tab v-for="item in tjlist" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="(item,inddx) in list"
              :key="inddx"
              :title="item.title"
              @click="$router.push({path:'/article',query:{id:item.art_id}})"
            >
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image :src="img" lazy-load />
                  </van-grid-item>
                </van-grid>
                <div>
                  <span>{{ item.aut_name }}</span>
                  <span>{{ item.collect_count }}评论</span>
                  <span>{{ item.pubdate | fromNow}}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { tuijian, getwenzhang } from "./home.js";
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: "home",
  data() {
    return {
      active: 0,
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      tjlist: [],
      listTime: null,
    };
  },
  methods: {
    async onLoad() {
      if (!this.listTime) {
        this.listTime = Date.now();
      }
      let data = await getwenzhang({
        channel_id: this.tjlist[this.active].id,
        timestamp: this.listTime,
      });
      this.list.push(...data.data.data.results);
      this.listTime = data.data.data.pre_timestamp;
      this.loading = false;
      if (this.list.length >= 100) {
        this.finished = true;
      }
    },
    tabsClick() {
      this.list = [];
      this.listTime = null
      this.loading = true
      this.onLoad();
    },
    onRefresh() {
      this.list = [];
      this.finished = false;
      this.loading = true;
      this.onLoad();
      this.isLoading = false;
    },
  },
  async created() {
    let res = await tuijian();
    this.tjlist = res.data.data.channels;
  },
  filters:{
    fromNow(value){
      return moment(value).fromNow()
    }
}
};
</script>

<style lang='less'>
.conterhome {
  height: 100vh;
  padding: 44px 0 46px 0;
  box-sizing: border-box;
  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    // .van-nav-bar__left {
    //   width: 120px;
    //   height: 30px;
    // }
    // .van-nav-bar__right {
    //   width: 120px;
    //   height: 30px;
    // }
    .bgcImg {
      background: url("~@/assets/logo.png") no-repeat;
      background-size: 120px 30px;
      width: 120px;
      height: 30px;
    }
    .van-icon {
      color: #fff;
    }
  }
  .van-tabs {
    height: 100%;
    padding-top: 44px;
    box-sizing: border-box;
    .van-tabs__wrap {
      position: fixed;
      top: 44px;
      left: 0;
      right: 0;
      z-index: 10;
    }
    .van-tabs__content {
      height: 100%;
      overflow-y: scroll;
      .van-cell__label span {
        margin-right: 15px;
      }
    }
  }
}
</style>